import React from 'react';
import {Button,Popover,Input,Select,Icon} from 'antd';
import VtxDatagrid from './VortexDatagrid/VortexDatagrid';
import styles from './VtxComboGrid.less';
const Option = Select.Option;

class ComboGrid extends React.Component{
    constructor(props){
        super(props);
        this.input = null;
    }
    toglePopup(){
        if(this.input)
            this.input.refs.input.click();
            // this.input.click();
    }
    render(){
        return (
            <div>
                {this.props.name}:
                <div className={styles.cb_ct}>
                    <Popover placement="bottomLeft" 
                    content={<PopupCT {...this.props}/>} 
                    trigger="click" 
                    >
                        <Input ref={(t)=>{ this.input = t;}} 
                        value={this.props.comboVal.join(', ')}
                        style={{width:'300px'}}
                        suffix={this.props.comboVal.length>0?<Icon type="close-circle" onClick={this.props.clearVal}/>:null}
                        />
                        {/* <Button type="primary" shape="circle" icon="plus"></Button> */}
                    </Popover>
                </div>
            </div>
        );
    }
}


function PopupCT(props){
    let tableProps = props.tableProps;
    let dom = null;
    return (
        <div>
            <div ref={(t)=>{dom = t}} className={styles.form_ct}>
                <div className={styles.input_ct}>
                    姓名：<Input className={styles.inputWd}/>
                </div>
                
                <div className={styles.input_ct}>
                    其他：
                    <Select getPopupContainer={()=>dom} className={styles.inputWd}>
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                    </Select>
                </div>
                <div className={styles.input_ct}>
                    ddd：<Input className={styles.inputWd}/>
                </div>
                <div className={styles.input_ct}>
                    <Button type="primary">查询</Button>
                    <Button >清空</Button>
                </div>
                
            </div>
            <div className={styles.grid_ct}>
                <VtxDatagrid {...tableProps}/>
            </div>
        </div>
    )
}

export default ComboGrid;

